// 标题
.real-title {
  width: 100%;
  display: flex;
  align-items: center;
  height: 60px;
  background-color: rgba(230, 238, 248, 1);

  //修改图标样式
  .iconfont {
    margin: 0 1% 0 15%;
    font-size: 2em;
    color: rgba(32, 140, 252, 1);
  }

  //修改文字样式
  p {
    font-size: 15px;
    color: rgba(80, 80, 80, 1);
  }
}

// 主体内容
.real-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 36px;
  text-align: center;
  //设置主体内容的中心样式
  .real-main-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 480px;
    height: 656px;
    border-radius: 5px;
    background-color: rgba(92, 150, 215, 1);

    //标题
    .title {
      margin-top: 26px;
      font-size: 13px;
      color: rgba(255, 255, 255, 1);
    }

    //扫描身份证正面
    .id-card-front {
      margin-top: 20px;
      width: 300px;
      height: 200px;
      background-color: #fff;
      img {
        width: 100%;
      }
      .id-card-front-new {
        position: absolute;
        top: 130px;
        left: 210px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background-color: #5c96d7;
        opacity: .5;
        text-align: center;
        .iconfont {
          font-size: 18px;
          color: #ffffff;
        }
      }
    }

    //扫描身份证背面
    .id-card-back {
      margin-top: 60px;
      width: 300px;
      height: 200px;
      img {
        width: 100%;
      }
    }

    //底部的多种选择
    .id-card-shoot {
      margin-top: 40px;
      width: 300px;
      height: 200px;
      img {
        width: 100%;
      }
    }
  }
}

//输入的表单
.real-form {
  margin: 40px auto 0;
  width: 480px;
  text-align: center;

  //提交按钮样式
  .el-button {
    width: 125px;
    height: 38px;
    border-radius: 8px;
    background-color: rgba(92, 150, 215, 1);
    color: white;
  }
}
